<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
import { departmentListApi } from '@/apis/consult';
import type { DepartData } from '@/types/consult';
import { ref, computed } from 'vue'

//4.获取上一个页面传递的数据
const props =defineProps<{
  type:string
  illnessType:string
}>()

// 1. 获取科室
const departmentList = ref<DepartData[]>([])
const getDepartment = async ()=>{
  const res = await departmentListApi()
  departmentList.value = res
}
getDepartment()

// 2. 处理选中和切换
const activeIndex = ref(0)
const changeDep = (index : number)=>{
  activeIndex.value = index
}

// 3. 二级科室
// 注意: ? 不能省略
const childList = computed(()=>{
  return departmentList.value[activeIndex.value]?.child
})

</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view v-for="(dep, index) in departmentList" :key="dep.id" class="department-item" :class="{ active: activeIndex === index }" @click="changeDep(index)">{{ dep.name }}</view>
      <view class="department-item"></view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator v-for="item in childList" :key="item.id" hover-class="none" :url="`/subpkg_consult/description/index?type=${props.type}&illnessType=${props.illnessType}&depId=${item.id}`" class="department-item">
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>